import React from "react";
// import { Divider, Popconfirm } from "antd";
import Link from "umi/link";
import queryString from "query-string";
import { getMenuRouter, getPageOperate } from "components/layouts/menuFn";
import { getTableProps } from "components/searchTable/SearchTable.jsx";

export default class Base extends React.PureComponent {
  getMenuRouter = getMenuRouter.bind(this);

  getPageOperate = getPageOperate.bind(this);

  getOprateDisable = type => {
    const {
      location: { pathname = "" },
      menuDataList,
      resourceList,
    } = this.props;
    const res = this.getPageOperate(type, pathname, menuDataList, resourceList);
    return res;
  };

  // eslint-disable-next-line
  getFormConfig() {
    return [
      { label: "任务名称", key: "taskName" },
      { label: "流程名称", key: "modelName" },
      { label: "申请人", key: "applyUserName" },
      { label: "流程单号", key: "serialNum" },
    ];
  }

  getTableColumns = () => [
    {
      title: "序号",
      dataIndex: "processInstanceId",
      render: (value, record, index) => {
        const {
          page: { pageNum, pageSize },
        } = this.state;
        return (pageNum - 1) * pageSize + index + 1;
      },
    },
    { title: "任务名称", dataIndex: "taskName" },
    {
      title: "自定义标题",
      width: 100,
      ellipsis: true,
      dataIndex: "customTitle",
    },
    { title: "流程名称", dataIndex: "modelName" },
    { title: "流程单号", dataIndex: "serialNum" },
    {
      title: "状态",
      dataIndex: "status",
      render: value => (value === "TODO" ? "待处理" : "已完成"),
    },
    { title: "申请时间", dataIndex: "createTime" },
    { title: "申请人", dataIndex: "applyUserName" },
    {
      title: "业务审批页",
      width: 100,
      align: "center",
      dataIndex: "busiApprovalPage",
      render: value => (
        <a
          onClick={() =>
            window.open(`http://${location.host}${value || ""}`, "_blank")
          }
        >
          打开
        </a>
      ),
    },
    {
      title: "操作",
      dataIndex: "claim",
      render: (value, record) => {
        // const { taskId, formKey, processDefinitionId, canRollback } = record; // 是否当前任务处理 1:是，0:否
        // const rollback = this.getOprateDisable("rollback");
        // const taskhandle = this.getOprateDisable("taskhandle");
        // const taskclaim = this.getOprateDisable("claim");
        return (
          <>
            <Link
              to={{
                // pathname: "/todo/detail",
                pathname: "/todo/templatepage",
                search: queryString.stringify({
                  processInstanceId: record.processInstanceId,
                  actype: "todo",
                  taskId: record.taskId,
                }),
              }}
            >
              详情
            </Link>
            {/* {(value === true && taskhandle && (
              <>
                <Divider type="vertical" />
                <Link
                  to={{
                    pathname: "/todo/deal",
                    search: queryString.stringify({
                      taskId,
                      processDefinitionId,
                      formKey,
                    }),
                  }}
                >
                  处理
                </Link>
              </>
            )) ||
              null} */}
            {/* { value === true && rollback && canRollback && (
                <>
                  <Divider type="vertical" />
                  <a
                    onClick={(e) => {
                      e.preventDefault();
                      this.handleRollbackVisible(true, record);
                    }}
                  >
                    退回
                  </a>
                </>
                ) || null
              } */}
            {/* {(value === false && taskclaim) && (
                <>
                  <Divider type="vertical" />
                  <Popconfirm
                    placement="left"
                    title={`确定签收：${record.modelName}?`} // `
                    onConfirm={() => { this.handleTaskclaim(record) }}
                    okText="确定"
                    cancelText="取消"
                  >
                    <a onClick={(e) => { e.preventDefault(); }}>签收</a>
                  </Popconfirm>
                </>
                ) || null
               } */}
          </>
        );
      },
    },
  ];

  getAntTableProps = () => {
    const {
      page: { pageNum, pageSize },
    } = this.state;
    const { flowHandleStore, loading } = this.props;
    const { processData = [], totalCount } = flowHandleStore;
    return getTableProps({
      rowKey: "taskId",
      columns: this.getTableColumns(),
      dataSource: processData,
      loading:
        loading.effects["FlowHandle/getProTodo"] ||
        loading.effects["FlowHandle/handleTaskclaim"],
      pagination: {
        current: pageNum,
        pageSize,
        total: totalCount,
        onChange: this.handlePageChange,
        onShowSizeChange: this.handlePageChange,
      },
    });
  };

  // 获取查询参数
  getQueryParam = () => {
    const {
      page: { pageNum, pageSize },
    } = this.state;
    return { ...this.searchParams, pageNum, pageSize };
  };

  // 触发查询
  initData = () => {
    const { dispatch } = this.props;
    const params = this.getQueryParam();
    const type = "FlowHandle/getProTodo";
    dispatch({ type, payload: params });
  };

  // 页码页数改变
  handlePageChange = (pageNum, pageSize) => {
    this.setState({ page: { pageNum, pageSize } }, () => {
      this.initData();
    });
  };

  // 搜索
  handleSearch = (values, reset) => {
    if (reset) {
      this.resetPageData();
      return;
    }
    const { page } = this.state;
    this.searchParams = values;
    this.setState({ page: { ...page, pageNum: 1 } }, () => {
      this.initData();
    });
  };
}
